<template>
	<view class="container">
		<!-- 加载状态 -->
		<u-loading :show="pageLoading" text="加载中..."></u-loading>

	<!-- 头部区域选择 -->
	<view class="header">
		<view class="location-selector" @click="showAreaPicker = true">
			<u-icon name="map-pin" size="16" color="#666"></u-icon>
			<text class="location-text">切换区域</text>
			<u-icon name="arrow-down" size="12" color="#666"></u-icon>
		</view>
		<text class="header-title">{{ selectedArea }}</text>
	</view>

		<!-- 时间筛选 -->
		<view class="time-filter">
			<view class="time-tabs">
				<view
					v-for="(item, index) in timeTabs"
					:key="index"
					class="time-tab"
					:class="{ active: activeTimeTab === index }"
					@click="switchTimeTab(index)"
				>
					{{item}}
				</view>
			</view>
		</view>

		<!-- 数据卡片区域 -->
		<view class="data-cards">
			<!-- 销售金额 -->
			<view class="data-card">
				<view class="card-header">
					<view class="icon-wrapper sales-icon">
						<view class="icon-bag">
							<text class="yuan-symbol">¥</text>
						</view>
					</view>
					<view class="card-info">
						<text class="card-title">销售金额</text>
					</view>
				</view>
				<view class="card-content">
					<text class="card-value sales-value">156,312.00 元</text>
					<view class="card-trend">
						<text class="trend-text trend-up">同比上月 +10%↑</text>
					</view>
				</view>
				<view class="progress-container">
					<view class="progress-bar">
						<view class="progress-fill" style="width: 80%; background-color: #4CAF50;"></view>
					</view>
					<text class="progress-text">达成80%</text>
				</view>
			</view>

			<!-- 商品销售数量 -->
			<view class="data-card">
				<view class="card-header">
					<view class="icon-wrapper product-icon">
						<view class="icon-box">
							<text class="product-symbol">📦</text>
						</view>
					</view>
					<view class="card-info">
						<text class="card-title">商品销售数量</text>
					</view>
				</view>
				<view class="card-content">
					<text class="card-value product-value">12,312.00 件</text>
					<view class="card-trend">
						<text class="trend-text trend-down">同比上月 +10%↓</text>
					</view>
				</view>
				<view class="progress-container">
					<view class="progress-bar">
						<view class="progress-fill" style="width: 80%; background-color: #4CAF50;"></view>
					</view>
					<text class="progress-text">达成80%</text>
				</view>
			</view>

			<!-- 本月新增门店 -->
			<view class="data-card">
				<view class="card-header">
					<view class="icon-wrapper store-icon">
						<view class="icon-building">
							<text class="building-symbol">🏢</text>
							<text class="arrow-up">↑</text>
						</view>
					</view>
					<view class="card-info">
						<text class="card-title">本月新增门店</text>
					</view>
				</view>
				<view class="card-content">
					<text class="card-value store-value">10 家</text>
					<view class="card-trend">
						<text class="trend-text trend-up">同比上月 +10%↑</text>
					</view>
				</view>
			</view>

			<!-- 本月退店 -->
			<view class="data-card">
				<view class="card-header">
					<view class="icon-wrapper store-icon">
						<view class="icon-building">
							<text class="building-symbol">🏢</text>
							<text class="arrow-down">↓</text>
						</view>
					</view>
					<view class="card-info">
						<text class="card-title">本月退店</text>
					</view>
				</view>
				<view class="card-content">
					<text class="card-value store-value">10 家</text>
					<view class="card-trend">
						<text class="trend-text trend-up">同比上月 +0%↑</text>
					</view>
				</view>
			</view>

			<!-- 门店覆盖率 -->
			<view class="data-card">
				<view class="card-header">
					<view class="icon-wrapper store-icon">
						<view class="icon-building">
							<text class="building-symbol">🏢</text>
							<text class="target-symbol">🎯</text>
						</view>
					</view>
					<view class="card-info">
						<text class="card-title">门店覆盖率</text>
					</view>
				</view>
				<view class="card-content">
					<text class="card-value store-value">1150 家</text>
					<view class="card-trend">
						<text class="trend-text trend-up">同比上月 +10%↑</text>
					</view>
				</view>
			</view>
		</view>

	<!-- 图表区域 -->
	<view class="chart-wrapper">
		<view class="chart-container">
			<!-- 筛选器 -->
			<view class="chart-filters">
				<view class="filter-row">
					<view class="filter-item" @click="showProductPicker = true">
						<text>{{ selectedProduct || '选择商品' }}</text>
						<u-icon name="arrow-down" size="12" color="#666"></u-icon>
					</view>
					<view class="filter-item" @click="showYearPicker = true">
						<u-icon name="calendar" size="12" color="#666"></u-icon>
						<text>{{ selectedYear || '选择年份' }}</text>
						<u-icon name="arrow-down" size="12" color="#666"></u-icon>
					</view>
					<view class="filter-item" @click="showMonthPicker = true">
						<u-icon name="calendar" size="12" color="#666"></u-icon>
						<text>{{ selectedMonth || '选择月份' }}</text>
						<u-icon name="arrow-down" size="12" color="#666"></u-icon>
					</view>
				</view>
					<view class="quarter-tabs">
						<view
							v-for="(item, index) in quarterTabs"
							:key="index"
							class="quarter-tab"
							:class="{ active: activeQuarterTab === index }"
							@click="switchQuarterTab(index)"
						>
							{{item}}
						</view>
					</view>
				</view>

		<!-- 图表内容 - 使用 ECharts -->
		<view class="chart-content" id="chartSection">
			<view class="chart-title">销售趋势图</view>
			<view class="echart-container">
				<!-- ✅ 懒加载：滚动到可见区域才加载图表 -->
				<l-echart 
					v-if="chartVisible && !isAnyPickerOpen" 
					ref="chart" 
					class="echart-component" 
					:custom-style="{width: '100%', height: '300px'}"
				></l-echart>
				<!-- ✅ 选择器打开时显示占位符 -->
				<view v-else-if="isAnyPickerOpen" class="chart-placeholder">
					<text class="placeholder-text">📊 图表已暂时隐藏</text>
				</view>
			<!-- ✅ 图表未加载时显示加载提示 -->
			<view v-else class="chart-placeholder">
				<text class="placeholder-text">📊 向下滚动查看销售趋势图</text>
				<text class="placeholder-hint">（图表懒加载，提升页面打开速度）</text>
			</view>
			</view>
		</view>

				<!-- 数据洞察 -->
				<view class="chart-insights">
					<text class="insights-title">数据指标在本年度的完成中:</text>
					<view class="insights-list">
						<view class="insight-item">
							<text class="insight-icon">📅</text>
							<text class="insight-text">在 12月 完成数量最多</text>
						</view>
						<view class="insight-item">
							<text class="insight-icon">📈</text>
							<text class="insight-text">这个月卖出了 380件 羊奶粉</text>
						</view>
						<view class="insight-item">
							<text class="insight-icon">👤</text>
							<text class="insight-text">领先了 95.3% 的人员</text>
						</view>
					</view>
					
					<!-- 动画控制按钮 -->
					<view class="animation-controls">
						<view class="control-btn" @click="updateChartData">
							<text>🔄 更新数据</text>
						</view>
						<view class="control-btn" @click="startChartAnimation">
							<text>▶️ 重播动画</text>
						</view>
					</view>
				</view>
			</view>
		</view>

	<!-- 弹窗组件 -->
	<!-- 区域选择器 -->
	<u-picker 
		mode="selector"
		v-model="showAreaPicker" 
		:range="areaList" 
		@confirm="selectArea"
		@cancel="cancelAreaPicker"
		:safe-area-inset-bottom="true"
		:mask-close-able="true"
	></u-picker>
	
	<!-- 商品选择器 -->
	<u-picker 
		mode="selector"
		v-model="showProductPicker" 
		:range="productList" 
		@confirm="selectProduct"
		@cancel="cancelProductPicker"
		:safe-area-inset-bottom="true"
		:mask-close-able="true"
	></u-picker>
	
	<!-- 年份选择器 -->
	<u-picker 
		mode="selector"
		v-model="showYearPicker" 
		:range="yearList" 
		@confirm="selectYear"
		@cancel="cancelYearPicker"
		:safe-area-inset-bottom="true"
		:mask-close-able="true"
	></u-picker>
	
	<!-- 月份选择器 -->
	<u-picker 
		mode="selector"
		v-model="showMonthPicker" 
		:range="monthList" 
		@confirm="selectMonth"
		@cancel="cancelMonthPicker"
		:safe-area-inset-bottom="true"
		:mask-close-able="true"
	></u-picker>
	</view>
</template>

<script>
import DataCard from '@/pagesData/components/DataCard.vue'
import LineChart from '@/pagesData/components/LineChart.vue'
import salesDataMixin from '@/pagesData/mixins/salesDataMixin'

// 引入 ECharts - 使用插件内的压缩版本
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'

export default {
	name: 'SalesDataPage',
	components: {
		DataCard,
		LineChart
	},
	mixins: [salesDataMixin],
	data() {
		return {
			// 时间选择器参数
			timePickerParams: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false
			},
			// 季度标签
			quarterTabs: ['一季度', '二季度', '三季度', '四季度'],
			activeQuarterTab: 0,
		// ✅ 图表数据 - 简化为纯数字数组
		yLabels: ['400', '300', '200', '100'],
		xLabels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
		chartData: [189, 150, 348, 275, 290, 250, 270, 235, 242, 291, 238, 380],
		// 选择器状态
		showAreaPicker: false,
		showProductPicker: false,
		showYearPicker: false,
		showMonthPicker: false,
		// 选择器数据
		areaList: ['重庆', '四川', '贵州', '云南', '广东', '上海', '北京'],
		productList: ['羊奶粉', '牛奶粉', '婴幼儿奶粉'],
		yearList: ['2024年', '2023年', '2022年'],
		monthList: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
		// ✅ 选中的值（用于回显）
		selectedArea: '重庆',
		selectedProduct: '',
		selectedYear: '',
		selectedMonth: '',
		// 图表动画控制
		chartAnimation: false,
		animationTimer: null,
		// ✅ 懒加载控制
		chartVisible: false,  // 图表是否可见（滚动到可见区域）
		// ✅ Loading 状态
		pageLoading: true  // 页面加载状态
	}
},
created() {
	// ✅ 将图表实例存储在非响应式属性中，避免循环引用问题
	// 不放在 data() 中，避免 Vue 对 ECharts 实例进行响应式处理
	this.chartInstance = null
	this.chartOption = null
	
	// ✅ 确保 chartData 初始化正确
	console.log('✅ created 钩子 - chartData 初始值:', this.chartData)
	console.log('✅ 数据点数量:', this.chartData.length)
},
	computed: {
		// ✅ 判断是否有任何选择器打开
		isAnyPickerOpen() {
			return this.showAreaPicker || this.showProductPicker || this.showYearPicker || this.showMonthPicker
		},
		// ECharts 配置项
		getChartOption() {
			return {
				grid: {
					left: '50',
					right: '20',
					bottom: '30',
					top: '50',
					containLabel: false
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: this.xLabels,
					axisLine: {
						show: true,
						lineStyle: {
							color: '#e0e0e0',
							width: 1
						}
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						color: '#999',
						fontSize: 11
					}
				},
				yAxis: {
					type: 'value',
					min: 100,
					max: 400,
					interval: 100,
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: '#f0f0f0',
							width: 1,
							type: 'solid'
						}
					},
					axisLabel: {
						color: '#999',
						fontSize: 11
					}
				},
		series: [
			{
				type: 'line',
				// ✅ 硬编码数据，确保100%能显示 并且chartData数组的值均 不为undefined
				data: this.chartData && this.chartData.length > 0 && this.chartData.every(item => item !== undefined)
                    ? this.chartData
                    : [189, 150, 348, 275, 290, 250, 270, 235, 242, 291, 238, 380],
				// data: [189, 150, 348, 275, 290, 250, 270, 235, 242, 291, 238, 380],
				smooth: false,
				symbol: 'circle',  // ✅ 显示圆点（改为 circle）
				symbolSize: 6,     // ✅ 圆点大小
						itemStyle: {
							color: '#2196F3',
							borderColor: '#fff',
							borderWidth: 2
						},
						lineStyle: {
							color: '#2196F3',
							width: 3
						},
						label: {
							show: true,        // ✅ 显示标签
							position: 'top',   // ✅ 标签在数据点上方
							color: '#333',
							fontSize: 12,
							fontWeight: 'bold',
							distance: 8,
							formatter: '{c}'   // ✅ 显示数据值
						},
						markLine: {
							silent: true,
							symbol: ['none', 'none'],
							label: {
								show: false
							},
							data: [
								{
									yAxis: 300,
									lineStyle: {
										type: 'dashed',
										color: '#f44336',
										width: 2
									}
								}
							]
						},
						animationDuration: 2000,
						animationEasing: 'cubicOut'
					}
				]
			}
		}
	},
	methods: {
		// 切换季度标签
		switchQuarterTab(index) {
			this.activeQuarterTab = index
			this.startChartAnimation()
		},
		
	// ✅ 选择区域
	selectArea(value) {
		this.showAreaPicker = false
		this.selectedArea = this.areaList[value[0]]  // ✅ 保存选中的值
		console.log('选择区域:', this.selectedArea)
		// ✅ 选择器关闭后，等待 DOM 更新，然后重新初始化图表
		this.$nextTick(() => {
			setTimeout(() => {
				this.initChart()
			}, 300)
		})
	},
	
	// 选择商品
	selectProduct(value) {
		this.showProductPicker = false
		this.selectedProduct = this.productList[value[0]]  // ✅ 保存选中的值
		console.log('选择商品:', this.selectedProduct)
		// ✅ 选择器关闭后重新初始化图表
		this.$nextTick(() => {
			setTimeout(() => {
				this.initChart()
			}, 300)
		})
	},
	
	// 选择年份
	selectYear(value) {
		this.showYearPicker = false
		this.selectedYear = this.yearList[value[0]]  // ✅ 保存选中的值
		console.log('选择年份:', this.selectedYear)
		// ✅ 选择器关闭后重新初始化图表
		this.$nextTick(() => {
			setTimeout(() => {
				this.initChart()
			}, 300)
		})
	},
	
	// 选择月份
	selectMonth(value) {
		this.showMonthPicker = false
		this.selectedMonth = this.monthList[value[0]]  // ✅ 保存选中的值
		console.log('选择月份:', this.selectedMonth)
		// ✅ 选择器关闭后重新初始化图表
		this.$nextTick(() => {
			setTimeout(() => {
				this.initChart()
			}, 300)
		})
	},
	
	// ✅ 通用的图表恢复方法
	restoreChart() {
		this.$nextTick(() => {
			setTimeout(() => {
				this.initChart()
			}, 300)
		})
	},
	
	// ✅ 取消区域选择
	cancelAreaPicker() {
		this.showAreaPicker = false
		console.log('取消选择区域')
		this.restoreChart()
	},
	
	// ✅ 取消商品选择
	cancelProductPicker() {
		this.showProductPicker = false
		console.log('取消选择商品')
		this.restoreChart()
	},
	
	// ✅ 取消年份选择
	cancelYearPicker() {
		this.showYearPicker = false
		console.log('取消选择年份')
		this.restoreChart()
	},
	
	// ✅ 取消月份选择
	cancelMonthPicker() {
		this.showMonthPicker = false
		console.log('取消选择月份')
		this.restoreChart()
	},
		
		// 初始化 ECharts
		async initChart() {
			try {
				// 检查组件是否存在
				if (!this.$refs.chart) {
					console.warn('图表组件引用不存在，延迟重试')
					setTimeout(() => {
						if (this.$refs.chart) {
							this.initChart()
						}
					}, 500)
					return
				}
				
		console.log('📈 开始初始化图表组件...')
		console.log('📊 当前 chartData:', this.chartData.length, '个数据点')
		this.chartInstance = await this.$refs.chart.init(echarts)
		console.log('✅ 图表实例创建成功')
		
		// 设置图表配置
		const option = this.getChartOption
		console.log('📊 图表配置中的数据:', option.series[0].data)
		this.chartInstance.setOption(option)
		console.log('✅ 图表配置设置成功')
		
		// ✅ 初始化后立即加载数据并显示
		setTimeout(() => {
			console.log('📊 开始加载图表数据...')
			this.startChartAnimation()
			console.log('🎉 图表加载完成，数据已显示')
		}, 100)
		} catch (error) {
			console.error('图表初始化失败:', error.message || error)
			// 显示友好的错误提示
			uni.showToast({
				title: '图表加载失败，请刷新重试',
				icon: 'none',
				duration: 2000
			})
		}
	},
		
	// 更新图表
	updateChart() {
		if (this.chartInstance) {
			this.chartInstance.setOption(this.getChartOption, true)
			console.log('图表已更新，当前数据点数量:', this.chartData.length)
		} else {
			console.warn('图表实例不存在，无法更新')
		}
	},
	
	// 开始图表动画
	startChartAnimation() {
		console.log('🎬 开始图表动画')
		console.log('📊 chartData 长度:', this.chartData.length)
		console.log('📊 chartData 数据:', this.chartData)
		this.updateChart()
	},
		
		// 生成随机数据（模拟数据变化）
		generateRandomData() {
			const baseData = [189, 150, 348, 275, 290, 250, 270, 235, 242, 291, 238, 380]
			return baseData.map(value => {
				// 在基础值上下浮动10%
				const variation = (Math.random() - 0.5) * 0.2
				return Math.round(value * (1 + variation))
			})
		},
		
	// 更新图表数据
	updateChartData() {
		// ✅ 直接使用生成的数字数组
		this.chartData = this.generateRandomData()
		console.log('🔄 图表数据已更新:', this.chartData)
		this.startChartAnimation()
	},
	
	// ✅ 检查图表是否在可见区域
	checkChartVisibility() {
		const query = uni.createSelectorQuery().in(this)
		query.select('#chartSection').boundingClientRect(data => {
			if (data) {
				// 获取系统信息
				const systemInfo = uni.getSystemInfoSync()
				const windowHeight = systemInfo.windowHeight
				
				// 判断图表是否进入可见区域（提前200px开始加载）
				if (data.top < windowHeight + 200 && data.bottom > -200) {
					if (!this.chartVisible) {
						console.log('📊 图表进入可见区域，准备加载组件...')
						this.chartVisible = true
						// ✅ 延迟初始化图表，确保 l-echart 组件完全挂载
						this.$nextTick(() => {
							setTimeout(() => {
								console.log('🚀 开始初始化图表组件和数据...')
								this.initChart()
							}, 500) // 增加到 500ms，确保组件完全渲染
						})
					}
				}
			}
		}).exec()
	},
	
	// ✅ 设置滚动监听
	setupScrollListener() {
		// 初始化时不需要额外操作，使用 onPageScroll 即可
		console.log('滚动监听已设置')
	}
},
	
onLoad() {
	console.log('销售数据页面加载')
	// ✅ 模拟数据加载
	setTimeout(() => {
		this.pageLoading = false
		console.log('页面数据加载完成')
	}, 500)
},

onReady() {
	console.log('销售数据页面渲染完成')
	// ✅ 设置页面滚动监听
	this.setupScrollListener()
	// ✅ 初始检查图表是否在可见区域
	this.checkChartVisibility()
},

onShow() {
	// 页面显示时检查图表是否需要重新初始化
	if (this.chartVisible && !this.chartInstance && this.$refs.chart) {
		setTimeout(() => {
			this.initChart()
		}, 500)
	}
},

onPageScroll(e) {
	// ✅ 页面滚动时检查图表是否进入可见区域
	this.checkChartVisibility()
},
	
	onUnload() {
		// 页面卸载时清理资源
		if (this.animationTimer) {
			clearTimeout(this.animationTimer)
		}
		// 销毁图表实例，释放内存
		if (this.chartInstance) {
			try {
				this.chartInstance.dispose()
				this.chartInstance = null
				console.log('图表实例已销毁')
			} catch (error) {
				console.error('销毁图表失败:', error.message || error)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	background-color: #f5f6fa;
	min-height: 100vh;
	padding-bottom: 20px;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 20px;
	background-color: #fff;
	
	.location-selector {
		display: flex;
		align-items: center;
		
		.location-text {
			margin: 0 6px;
			font-size: 14px;
			color: #666;
		}
	}
	
	.header-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}
}

.time-filter {
	padding: 12px 20px;
	background-color: #fff;
	margin-bottom: 8px;
	
	.time-tabs {
		display: flex;
		
		.time-tab {
			flex: 1;
			text-align: center;
			padding: 6px 12px;
			border-radius: 16px;
			font-size: 13px;
			color: #666;
			margin: 0 2px;
			
			&.active {
				background-color: #2196F3;
				color: #fff;
			}
		}
	}
}

.data-cards {
	padding: 0 20px;
	
	.data-card {
		background-color: #fff;
		border-radius: 8px;
		padding: 16px;
		margin-bottom: 12px;
		box-shadow: 0 1px 4px rgba(0,0,0,0.1);
		
		.card-header {
			display: flex;
			align-items: center;
			margin-bottom: 12px;
			
			.icon-wrapper {
				width: 32px;
				height: 32px;
				border-radius: 6px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 10px;
				
				&.sales-icon {
					background-color: #4CAF50;
				}
				
				&.product-icon {
					background-color: #4CAF50;
				}
				
				&.store-icon {
					background-color: #4CAF50;
				}
				
				.icon-bag {
					width: 20px;
					height: 20px;
					background-color: #fff;
					border-radius: 4px;
					display: flex;
					align-items: center;
					justify-content: center;
					
					.yuan-symbol {
						font-size: 12px;
						font-weight: bold;
						color: #4CAF50;
					}
				}
				
				.icon-box {
					width: 20px;
					height: 20px;
					background-color: #fff;
					border-radius: 4px;
					display: flex;
					align-items: center;
					justify-content: center;
					
					.product-symbol {
						font-size: 12px;
					}
				}
				
				.icon-building {
					width: 20px;
					height: 20px;
					background-color: #fff;
					border-radius: 4px;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					
					.building-symbol {
						font-size: 10px;
					}
					
					.arrow-up, .arrow-down, .target-symbol {
						position: absolute;
						top: -2px;
						right: -2px;
						font-size: 8px;
					}
				}
			}
			
			.card-title {
				font-size: 13px;
				color: #666;
			}
		}
		
		.card-content {
			margin-bottom: 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.card-value {
				font-size: 20px;
				font-weight: bold;
				margin-bottom: 6px;
				display: block;
				
				&.sales-value {
					color: #4CAF50;
				}
				
				&.product-value {
					color: #4CAF50;
				}
				
				&.store-value {
					color: #f44336;
				}
			}
			
			.card-trend {
				.trend-text {
					font-size: 11px;
					
					&.trend-up {
						color: #f44336;
					}
					
					&.trend-down {
						color: #4CAF50;
					}
				}
			}
		}
		
		.progress-container {
			.progress-bar {
				height: 3px;
				background-color: #f0f0f0;
				border-radius: 2px;
				overflow: hidden;
				margin-bottom: 4px;
				
				.progress-fill {
					height: 100%;
					border-radius: 2px;
				}
			}
			
			.progress-text {
				font-size: 11px;
				color: #666;
			}
		}
	}
}

.chart-wrapper {
	margin: 0 20px 15px;
	position: relative;
	z-index: 1;  // ✅ 设置为 1，确保整个图表区域在遮罩层下方
	
	.chart-container {
		background-color: #fff;
		border-radius: 8px;
		padding: 16px;
		box-shadow: 0 1px 4px rgba(0,0,0,0.1);
		position: relative;
		z-index: 1;  // ✅ 确保容器在遮罩层下方
		
		.chart-filters {
			margin-bottom: 16px;
			
			.filter-row {
				display: flex;
				margin-bottom: 12px;
				
				.filter-item {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 6px 8px;
					margin: 0 4px;
					background-color: #f8f9fa;
					border-radius: 4px;
					
					text {
						font-size: 11px;
						color: #666;
						margin: 0 4px;
					}
				}
			}
			
			.quarter-tabs {
				display: flex;
				
				.quarter-tab {
					flex: 1;
					text-align: center;
					padding: 4px 8px;
					border-radius: 12px;
					font-size: 12px;
					color: #666;
					margin: 0 2px;
					
					&.active {
						background-color: #2196F3;
						color: #fff;
					}
				}
			}
		}
		
		.chart-content {
			.chart-title {
				font-size: 14px;
				font-weight: bold;
				color: #333;
				margin-bottom: 12px;
			}
			
		.echart-container {
			width: 100%;
			height: 300px;
			position: relative;
			z-index: 1;  // ✅ 设置为 1，确保在遮罩层下方
			
			// ✅ 针对 l-echart 组件本身
			.echart-component {
				position: relative;
				z-index: 1;
			}
			
		// ✅ 图表占位符样式
		.chart-placeholder {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: #f8f9fa;
			border-radius: 8px;
			padding: 20px;
			
			.placeholder-text {
				font-size: 14px;
				color: #666;
				font-weight: 500;
				margin-bottom: 8px;
			}
			
			.placeholder-hint {
				font-size: 12px;
				color: #999;
				text-align: center;
			}
		}
		}
		}
		
		.chart-insights {
			margin-top: 16px;
			
			.insights-title {
				font-size: 13px;
				color: #333;
				margin-bottom: 8px;
				display: block;
			}
			
			.insights-list {
				.insight-item {
					display: flex;
					align-items: center;
					margin-bottom: 6px;
					
					.insight-icon {
						font-size: 14px;
						margin-right: 8px;
					}
					
					.insight-text {
						font-size: 12px;
						color: #666;
					}
				}
			}
			
			.animation-controls {
				display: flex;
				margin-top: 12px;
				gap: 8px;
				
				.control-btn {
					flex: 1;
					background-color: #f8f9fa;
					border-radius: 6px;
					padding: 8px 12px;
					text-align: center;
					border: 1px solid #e0e0e0;
					transition: all 0.3s ease;
					
					&:active {
						background-color: #e3f2fd;
						border-color: #2196F3;
						transform: scale(0.98);
					}
					
					text {
						font-size: 12px;
						color: #666;
					}
				}
			}
		}
	}
}

/* ✅ 强制限制 l-echart 组件及其内部元素的 z-index */
/deep/ .echart-component,
/deep/ .l-echart,
/deep/ .echart-component canvas,
/deep/ .l-echart canvas,
/deep/ .echart-component view,
/deep/ .l-echart view {
	position: relative !important;
	z-index: 1 !important;  /* 确保图表在最底层 */
}

/* ✅ 确保选择器在最上层，遮罩层可点击 */
/deep/ .u-mask {
	z-index: 999 !important;     /* 遮罩层在图表上面，但在选择器下面 */
}

/deep/ .u-picker {
	z-index: 1000 !important;    /* 选择器面板在最上面 */
}

/* ✅ 确保 u-drawer（选择器的抽屉容器）也有正确的层级 */
/deep/ .u-drawer {
	z-index: 1000 !important;
}

/* ✅ 如果使用的是 u-action-sheet */
/deep/ .u-action-sheet {
	z-index: 1000 !important;
}
</style>
